<template>
  <el-dialog v-model="drawer" title="基础信息编辑" :append-to-body="true" width="670px" @close="close">
     <el-form size="small" :model="form" :rules="rules" ref="ruleRefForm" label-width="110px">
        <el-form-item label="活动主题" prop="theme">
            <el-input v-model="form.theme" placeholder="请输入" style="width:205px"></el-input>
        </el-form-item>
        <el-row>
            <el-form-item label="活动类型" prop="parentClassify">
                <el-select v-model="form.parentClassify" placeholder="请选择" size="small" @change="handleActive" style="width:205px">
                    <el-option
                        v-for="item in parentClassifyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item prop="classify" label-width="10px">
                <el-select v-model="form.classify" placeholder="请选择" size="small" style="width:200px">
                    <el-option
                        v-for="item in parentClassifyList[parentIndex].children"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
        </el-row>
        <el-row justify="space-between">
            <el-form-item prop="saleMsg" label="促销产品信息">
                <el-input v-model="form.saleMsg" placeholder="请输入" style="width:205px"></el-input>
            </el-form-item>
            <el-form-item prop="adMsg" label="广告宣传标语">
                <el-input v-model="form.adMsg" placeholder="请输入" style="width:200px"></el-input>
            </el-form-item>
        </el-row>
        <el-row justify="space-between">
            <el-form-item prop="month" label="投放月份">
                <el-date-picker
                    v-model="form.month"
                    type="month"
                    placeholder="请选择"
                    style="width:205px"
                />
            </el-form-item>
            <el-form-item prop="location" label="活动地点">
                <el-input v-model="form.location" placeholder="请输入" style="width:200px"></el-input>
            </el-form-item>
        </el-row>
        <el-form-item prop="activeDesc" label="活动描述">
            <el-input type="textarea" v-model="form.desc" placeholder="请输入" style="width: 515px"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" placeholder="请输入" v-model="form.remark" style="width: 515px"></el-input>
        </el-form-item>
     </el-form>
     <template #footer>
        <el-row justify="center">
            <el-button type="primary" size="small" @click="submitForm(ruleRefForm)">提交</el-button>
            <el-button type="default" size="small" @click="cancelForm(ruleRefForm)">取消</el-button>
        </el-row>
     </template>
  </el-dialog>
</template>

<script>
import { computed, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
    name: 'ActiveBaseEdit',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        editForm: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    setup(props, context) {
        const { dialogDrawer, editForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            form: {},
            rules: {
                theme: [{ required: true, message: '请输入活动主题', trigger: 'blur' }]
            },
            parentClassifyList: [{
                label: '展会',
                value: 1,
                children: [{
                    label: '春交会',
                    value: 1.1
                }]
            },{
                label: '年会',
                value: 2,
                children: [{
                    label: '周年庆',
                    value: 2.1
                }]
            }],
            parentIndex: 0,
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    if (ruleRefForm.value) {
                        ruleRefForm.value.resetFields()
                    }
                    state.form = editForm.value
                }
            }
        )
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate(valid => {
                if (valid) {
                    close()
                    ElMessage.success('编辑成功')
                    context.emit('onSubmit', true)
                }
            })
        }
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            close()
        }
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const handleActive = e => {
            const index = state.parentClassifyList.findIndex(item => {
                return item.value == e
            })
            if(index > -1){
                state.parentIndex = index
            }
            state.form.classify = ''
        }
        return {
            ...toRefs(state),
            drawer,
            submitForm,
            cancelForm,
            ruleRefForm,
            close,
            handleActive
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form-item{
    align-items: start;
    flex: 1;
}
</style>